<template>
  <van-collapse
    v-model="activeCourseId"
    accordion
    class="course-box"
  >
    <van-collapse-item
      v-for="item in courseList"
      :key="item.CourseId"
      :title="item.CourseName"
      :name="item.CourseId"
    >
      <div
        v-for="paper in item.WrongExamPaperList"
        :key="paper.PaperId"
        class="paper-content"
        @click="onNavPaper(paper, item.CourseId)"
      >
        <div class="paper-name">
          {{ paper.PaperName }}
        </div>
        <div class="wrong-count">
          {{ paper.WrongQuestionCount }}道
        </div>
      </div>
    </van-collapse-item>
  </van-collapse>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: ['courseList', 'type', 'value', 'isCollect', 'classId'],
  data () {
    return { }
  },
  computed: {
    activeCourseId: {
      set (id: number) {
        this.$emit('input', id)
      },
      get (): number {
        return this.value
      },
    },
  },
  methods: {
    onNavPaper (paper: any, CourseId: string) {
      this.$router.push({
        name: 'examTest',
        query: {
          Type: this.type,
          PaperId: paper.PaperId,
          CourseId,
          ShowType: '2',
          subj: paper.PaperName,
          ClassId: this.classId,
        },
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  min-height: 100%;
  background: #FFF;
}
.tabs-view {
  /deep/ .van-tabs--line .van-tabs__wrap{
    height: 97px;
  }
  /deep/ .van-ellipsis{
    font-size: 32px;
  }
}
.course-box {
  /deep/ {
    .van-collapse-item__content {
      padding: 0;
    }
    .van-cell__title {
      font-size: 32px;
      font-weight: 600px;
      color: #333;
      width: 90%;
      span {
        display: block;
        width: 100%;
        @include ellipsis;
      }
    }
  }
}
.paper-content {
  display: flex;
  justify-content: space-between;
  height: 90px;
  line-height: 90px;
  font-size: 28px;
  background: #F6F6F6;
  padding-left: 52px;
}
  .paper-name {
    color: #333;
    width: calc(100% - 150px);
    @include ellipsis;
  }
  .wrong-count {
    margin-right: 25px;
    color: $primary-web;
  }

</style>
